<template>
  <div class="userMain">
    <!-- 搜索栏 -->
    <div id="seacher">
      姓名：
      <el-input
        placeholder="请输入内容"
        v-model="inputUsername"
        size="small"
        style="width: 200px"
        clearable
      ></el-input>
      手机：
      <el-input
        placeholder="请输入内容"
        v-model="inputPhone"
        size="small"
        style="width: 200px"
        clearable
      ></el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="checkUser_fen()"
        size="small"
        >搜索</el-button
      >
    </div>
    <!-- 数据表格 -->
    <el-table :data="myUsers" style="margin-top: 50px" align="center">
      <el-table-column label="标记" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="编号" align="center" width="180" prop="id" />
      <el-table-column label="商品" align="center" width="180" prop="title" />
      <el-table-column label="数量" align="center" width="180" prop="num" />
      <el-table-column label="姓名" align="center" width="180" prop="name" />
      <el-table-column label="手机" align="center" width="180" prop="phone" />
      <el-table-column label="地址" align="center" width="180" prop="address" />
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag :style="scope.row.style" type="danger">{{
            scope.row.isDisplayName
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope" align="center">
          <el-button size="mini" 
            >{{scope.status?'已发货':'点击发货'}}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- total:总条数  page-size:一页的条数 current-page当前所在页数  current-change:改变页数时触发-->
    <el-pagination
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="usernum"
      :page-size="pageSize"
      :current-page="currentPage"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "UserMain",
  data() {
    return {
      myUsers: [], //记录获取到的用户数据
      inputUsername: "", //记录查询栏的姓名输入
      inputPhone: "", //记录查询栏的手机输入
      options: [], //记录获取到的roles数据
      value: "", //记录查询栏的选择角色
      usernum: 0, //记录一共有多少个用户
      addUsername: "",
      showdialog: false, //编辑和新增弹出框的显示和隐藏
      pointDialog: false, //提示弹出框问题的显示隐藏
      isadd: false,
      isupdata: false,
      formLabelWidth: "100px", //弹出框的label宽度

      edit_id: "", //放入弹出框的数据显示
      edit_username: "",
      edit_phone: "",
      edit_password: "",

      data_succ: false, //控制数据操作成功的提示
      data_succ_msg: "",
      salt: "d9b1d7db4cd6e70935368a1efb10e377", //加密盐值，可以改
      currentPage: 3, //当前显示页数
      pageSize: 5, //单页条数
      total: 0, //总条数
    };
  },
  beforeCreate() {
    //钩子函数，模板渲染成html前调用
    this.$store.dispatch("getRolelist");
  },
  created() {
    this.options = this.$store.state.rolelist;
    this.checkUser_fen();
  },

  methods: {
    checkUser_fen: function () {
      this.$axios
        .post("/apis/searchOrderByInfo", {
          username: this.inputUsername,
          phone: this.inputPhone,
          roleid: this.value,
          currentPage: this.currentPage, //页码
          pageSize: this.pageSize, //页大小
        })
        .then((response) => {
          response.data.data.orders.forEach((e) => {
            if (e.status == "0") {
              e.style =
                "background-color: rgba(2, 236, 169, 0.4) !important;border: 1px solid #02eca9 !important;";
              e.isDisplayName = "待发货";
            } else if (e.status == "1") {
              e.style =
                "background-color: rgba(255, 100, 97, 0.4) !important;border: 1px solid #ff6461 !important;";
              e.isDisplayName = "已收货";
            }
          });

          let res = response.data;
          console.log(res);
          if (res.success) {
            let users = res.data.orders; //获取到user的数据
            this.myUsers = users; //赋值给前端使用
          } else {
          }
        });
      this.$axios.get("/apis/getOrdersList", {}).then((response) => {
        this.usernum = response.data.data.orders.length;
        console.log(this.usernum);
      });
    },
    handleClick(row) {
      console.log(row);
    },

    //当前页变化
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(this.currentPage);
      this.checkUser_fen();
    },
  },
};
</script>

<style scoped>
.userMain {
  background-color: white; /* 设置背景颜色为白色*/
  height: 750px;
}

#edit {
  background-color: white;
}
#delete {
  background-color: #ff5e6d;
}
#edit,
#delete {
  width: 50px;
  height: 23px;
  border-radius: 5px;
  font-size: 10px;
}
#edit:active,
#delete:active {
  background-color: rgb(224, 233, 233);
}

#seacher {
  padding-top: 10px;
}
</style>